<!-- 图文导航 -->
<template>
  <div
    class="back"
    :style="{
      'background-color': config.ConfigData.bgcolor,
      margin: '0 ' + config.ConfigData.margin + 'px',
      'border-radius': config.ConfigData.parentradius + 'px',
      padding: '0 ' + config.ConfigData.padding + 'px'
    }"
  >
    <div v-if="config.ConfigData.isscroll" class="title-div-scroll">
      <div
        v-for="(item, index) in config.ConfigData.titlelist"
        :key="index"
        class="title-item"
        :style="{ width: 100 / config.ConfigData.scrollno + '%' }"
      >
        <img
          lazy-load
          mode="widthFix"
          v-if="config.ConfigData.type == 1"
          class="img-size"
          :src="item.img | getgalleryImg('p450')"
        />
        <div class="title_name_view">
          <text
            class="title-name"
            :style="{ color: config.ConfigData.textcolor }"
            >{{ item.name }}</text
          >
        </div>
      </div>
    </div>
    <div v-else class="title-div-noscroll">
      <div
        v-for="(item, index) in config.ConfigData.titlelist"
        :key="index"
        class="title-item"
        :style="{ width: 100 / config.ConfigData.scrollno + '%' }"
      >
        <img
          lazy-load
          mode="widthFix"
          v-if="config.ConfigData.type == 1"
          class="img-size"
          :src="item.img | getgalleryImg('p450')"
        />
        <div class="title_name_view">
          <text
            class="title-name"
            :style="{ color: config.ConfigData.textcolor }"
            >{{ item.name }}</text
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { isReallyNull } from "@/utils/utils";
import { Medias } from "@/utils/constant";
export default {
  name: "GraphicNavigation",
  props: {
    config: Object
  },
  data() {
    return {
      Medias: Medias
    };
  },
  methods: {
    ngt(item) {
      if (isReallyNull(item.linktype) || isReallyNull(item.bizsysnos)) {
        return;
      }
      this.$emit("comsngt", item);
    },
    showpr(item) {
      if (!isReallyNull(item.bizsysnos)) {
        return;
      }
      // wepy.previewImage({
      //   urls: [item.img] // 需要预览的图片链接列表,
      // });
    }
  },
  mounted() {
    this.Medias = Medias;
  }
};
</script>

<style type="scss">
.back {
  /* height: 68px; */
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  box-sizing: border-box;
  background-color: transparent;
}
.title-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 82px;
}
.img-size {
  height: 45px;
  width: 45px;
}
.title-div-noscroll {
  display: flex;
  flex-direction: row;
  background-color: transparent;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 5px;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.title-div-scroll {
  display: flex;
  flex-direction: row;
  background-color: transparent;
  display: inline-flex;
  box-sizing: border-box;
  padding: 0 5px;
}
.title_name_view {
  width: 80px;
  padding: 0 2px;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-align: center;
}
.title-name {
  width: 80px;
}
</style>
